<!--
 @Description 左右留白轮播1
 @author hemengxia
 @date 2022/10/20
-->

<template>
  <section
    v-if="list.length>0"
    class="v-banner-style-one"
    :style="{ 'margin-top': top,'padding-left': paddingLeftRight,'padding-right': paddingLeftRight}"
  >
    <template>
      <div
        :id="isInitData ? option.id :'vBannerSwiperOne' "
        ref="vBannerSwiper"
        class="v-banner-style-one-inner swiper mySwiper"
        :style="{'height': height,borderRadius:radiusSize}"
      >
        <div class="swiper-wrapper">
          <div
            v-for="item in list"
            :key="item.id"
            class="swiper-slide"
          >
            <van-image
              :src="setImgPath(getMapping(item,'carouselImg'),getMapping(item,'carouselImgUrl'))"
              :fit="imgType"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/error-icon.png" alt="">
              </template>
            </van-image>
          </div>
        </div>

        <div v-show="indicators" class="swiper-pagination" />
      </div>
    </template>
  </section>
</template>
<script>
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import mixins from './../mixins'
import bannerMixins from '@/components/CustomPage/apps/widget/banner/mixins'

export default {
  name: 'VBannerStyleOne',
  mixins: [mixins, bannerMixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      swiper: null,
      list: [],
      defaultList: [
        {
          id: '1',
          carouselImg: '',
          carouselImgUrl: ''
        },
        {
          id: '2',
          carouselImg: '',
          carouselImgUrl: ''
        }
      ]
    }
  },

  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  mounted() {
    if (!this.isInitData) {
      this.$nextTick(() => {
        this.init()
      })
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      if (this.option.dataorigin === '1') {
        this.list = result?.dataList?.data || []
      } else {
        this.list = result?.dataList?.data.rows || []
      }
      this.$nextTick(() => {
        this.init()
      })
    },

    init() {
      const ths = this

      if (ths.isAutoPlay) {
        this.swiper = new Swiper(this.isInitData ? `#${this.option.id} .swiper` : '#vBannerSwiperOne .swiper', {
          pagination: {
            el: ` .swiper-pagination`
          },
          autoplay: {
            delay: ths.isAutoPlay ? ths.delayTime : 0// 1秒切换一次
          },
          observer: true,
          observeParents: true
        })
      } else {
        this.swiper = new Swiper(this.isInitData ? `#${this.option.id} .swiper` : '#vBannerSwiperOne .swiper', {
          pagination: {
            el: ` .swiper-pagination`
          },
          autoplay: false,
          observer: true,
          observeParents: true
        })
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.v-banner-style-one {
  position: relative;
  width: rem(750);

  .v-banner-style-one-inner {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    height: rem(350);

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    text-align: center;

    .swiper-wrapper {
      width: 100%;

      .swiper-slide {
        width: 100%;
        height: 100%;

        .van-image {
          width: 100%;
          height: 100%;
          //border-radius: rem(12);

          .van-image__img {
            //border-radius: rem(12);
          }

          .van-image__error {
            //border-radius: rem(12);

            img {
              width: rem(120);
              height: rem(120);
            }
          }
        }

        &.radius {
          border-radius: rem(4);

          .van-image {
            border-radius: rem(4);
          }
        }
      }

    }

    .swiper-pagination-bullet {
      width: rem(12);
      height: rem(12);
      border-radius: rem(6);
      opacity: 0.6;
      background: #fff;

      &.swiper-pagination-bullet-active {
        @include bg-color($mainColor);
        width: rem(24);
        height: rem(12);

      }
    }

  }
}
</style>
